<template>
	<view class="content-box">
		<view class="content-box-top"></view>
		<view class="back_btn_box">
			<image src="../../static/training/back.png" style="width: 20rpx;" mode="widthFix" @click="back"></image>
		</view>
		<view class="share_btn_box">
			<image src="../../static/training/share.png" style="width: 40rpx;" mode="widthFix"></image>
		</view>
		<view class="m-left-92 tr_info mtop20">
			<view class="status ing">
				<text class="msg_ing"></text>
			</view>
			<view class="m-left-92 title">
				{{info.trainingClassName}}
			</view>
			<view class="m-left-92 bianhao">
				<view class="b_lable">
					培训编号
				</view>
				<view class="b_no">
					{{info.templateId}}
				</view>
			</view>
		</view>
		<view class="m-left-92" style="border-radius: 20rpx;overflow: hidden;margin-top: 20rpx;">
			<video style="width: 100%;" :initial-time="videoInfo.watchTime" @pause="pauseVideo" :src="videoInfo.vaViewUrl" @ended="videoEnd" http-cache="true" @timeupdate="timeUpdate" @loadedmetadata="onLoadedMetadata"></video>
		</view>


		<view class="m-left-92 qd_info">
			<view class="m-left-92">
				<view class="info_kejian_info">
					<view class="item " @click="toInfo">
						基础信息
					</view>
					<view class="item se">
						课节信息
						<view class="se_box"></view>
					</view>
				</view>
			</view>
			<view class="info_kejian_info_detail">
				<view class="kejie_info" v-for="(item,index) in courseListData" :key="index">
					<view class="k_title">
						<view class="kt_1"></view>
						<view class="kt_2">{{item.name}}</view>
					</view>
					<view class="k_item" v-for="(item1,index1) in item.tchrLessonList" @click="changeVideo(item1)">
						<view class="k_img_box">
							<image :src="item1.coverImgViewUrl" class="k_img"></image>
							<image src="../../static/video/bofang.png" class="bf" mode="widthFix"></image>
							<view class="bf_num">
								播放次数999
							</view>
						</view>
						<view class="k_info">
							<view class="k_info_t">
								{{index1+1}}.{{item1.name}}
							</view>
							<view class="k_info_time">
								2课时 80分钟
							</view>
							<view class="tbt">
								{{info.trainingCycleStartDate}}-{{info.trainingCycleEndDate}}
							</view>
						</view>
						<view class="ki">
							<view class="ki1">
								<view class="ki2">
									已观看<text class="c1">{{item1.watchProgress}}</text>%
								</view> 
								<view class="ing" v-if="item1.watchState==1">
									观看中
								</view>
								<view class="un" v-else-if ="item1.watchState==2">
									观看完成
								</view>
								<view class="un" v-else>
									未观看
								</view> 
							</view>
							<view class="ki3">
								<progress :percent="item1.watchTime" activeColor="#2044CC" stroke-width="4" />
							</view>
						</view>
					</view>
					<!-- <view class="k_item">
						<view class="k_img_box">
							<image src="../../static/training/img001.png" class="k_img"></image>
							<image src="../../static/video/bofang.png" class="bf" mode="widthFix"></image>
							<view class="bf_num">
								播放次数999
							</view>
						</view>
						<view class="k_info">
							<view class="k_info_t">
								1.列车运行图的图编制质量的检查
							</view>
							<view class="k_info_time">
								2课时 80分钟
							</view>
							<view class="tbt">
								2023/02/05-2023/04/05
							</view>
						</view>
						<view class="ki">
							<view class="ki1">
								<view class="ki2">
									已观看<text class="c1">50</text>%
								</view>
								<view class="ing">
									观看中
								</view>
							</view>
							<view class="ki3">
								<progress :percent="50" activeColor="#2044CC" stroke-width="4" />
							</view>
						</view>
					</view>
					<view class="k_item">
						<view class="k_img_box">
							<image src="../../static/training/img001.png" class="k_img"></image>
							<image src="../../static/video/bofang.png" class="bf" mode="widthFix"></image>
							<view class="bf_num">
								播放次数999
							</view>
						</view>
						<view class="k_info">
							<view class="k_info_t">
								1.列车运行图的图编制质量的检查
							</view>
							<view class="k_info_time">
								2课时 80分钟
							</view>
							<view class="tbt">
								2023/02/05-2023/04/05
							</view>
						</view>
						<view class="ki">
							<view class="ki1">
								<view class="ki2">
									已观看<text class="c1">0</text>%
								</view>
								<view class="un">
									未观看
								</view>
							</view>
							<view class="ki3">
								<progress :percent="0" activeColor="#2044CC" stroke-width="4" />
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="left_30"></view>
		</view>
		<view class="magin_top20"></view>
	</view>

</template>

<script>
	import {
		courseList,baseInfo,trainingLessonWatch
	} from "@/common/api/training/training.js";
	export default {
		data() {
			return {
				id:'',
				info:{
					
				},
				courseListData:[],
				videoInfo:{
					
				}
			};
		},
		onLoad(query) {
			if(query.id){
				this.id=query.id;
				courseList({id:query.id}).then((res) => {
					if (res && res.code == 200 && res.data) {
						this.courseListData=res.data; 
						for(var i=0;i<res.data.length;i++){
							for(var d=0;d<res.data[i].tchrLessonList.length;i++){ 
								if(res.data[i].tchrLessonList[d]){ 
									this.videoInfo=res.data[i].tchrLessonList[d]; 
									break;
								}
							}
						} 
						console.log(this.videoInfo)
					}
				}); 
				baseInfo({id:query.id}).then((res) => {
					if (res && res.code == 200 && res.data) {
						if(res.data.trainingCycleEndDate){
							res.data.trainingCycleEndDate=res.data.trainingCycleEndDate.substring(0,10);
						}
						if(res.data.trainingCycleStartDate){
							res.data.trainingCycleStartDate=res.data.trainingCycleStartDate.substring(0,10);
						}
						this.info=res.data
					}
				}); 
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toInfo() {
				uni.navigateTo({
					url: "/pages/training/info?id="+this.id
				})
			},
			changeVideo(item){
				this.trainingLessonWatchSet();
				console.log(item)
				this.videoInfo=item; 
			},
			videoEnd(){
				console.log("视频播放完成");
				this.trainingLessonWatchSet();
			},
			timeUpdate(event){
				if(this.totalDuration>0){
					let time = event.detail.currentTime;
					this.videoInfo.watchTime=time;
					var num = parseFloat(time);
					var total = parseFloat(this.totalDuration);
					const watchProgress=parseInt(total <= 0 ? "0" : (Math.round(num / total * 10000) / 100))
					console.log(watchProgress); 
					this.videoInfo.watchProgress=watchProgress; 
					if(this.videoInfo.watchProgress==100){
						this.videoInfo.watchState=2;
					}else if(this.videoInfo.watchProgress>0 && this.videoInfo.watchProgress<100){
						this.videoInfo.watchState=1
					} 
				} 
			},
			onLoadedMetadata(e) {
				console.log(e)
			    this.totalDuration = e.detail.duration; // 获取视频总时长
			}, 
			pauseVideo(e){
				console.log("暂停视频");
				this.trainingLessonWatchSet();
			},
			trainingLessonWatchSet(){
				var data={
					"trainingLessonId":this.videoInfo.trainingLessonId,
					"tchrLessonId":this.videoInfo.tchrLessonId,
					"watchTime":parseInt(this.videoInfo.watchTime),
					"watchProgress":this.videoInfo.watchProgress,
					"watchState":this.videoInfo.watchState
				};
				console.log("data",data)
				trainingLessonWatch(data).then((res) => {
					 
				}); 
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import url("../../common/base.css");
	@import "./info.scss";

	page {
		background-color: #F2F3F6;
	}
</style>